<template>
  <div class="main-container paper">
    <div class="left item-bg">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="试评状态" />
        <a-tab-pane key="2" tab="正评状态" />
      </a-tabs>
      <leftTreeVue />
    </div>
    <div class="right item-bg">
      <keep-alive exclude="Detail">
        <component :is="renderComponent" :activeKey="activeKey" />
      </keep-alive>
    </div>
  </div>
</template>
<script setup lang="ts" name="ExamPapers">
import { ref, getCurrentInstance, onMounted, computed, watch, shallowRef } from 'vue'
import leftTreeVue from './leftTree.vue'
import listVue from './list.vue'
import listRecruitVue from './list-recruit.vue'
import detailVue from './detail-index.vue'
import detailTest from './detail-test.vue'
import { useUserStore } from '/@/store/modules/user'
const activeKey = ref('2')

const userStore = useUserStore()
const userInfo = computed(() => userStore.getUserInfo)
let { proxy } = getCurrentInstance()
const { mittBus } = proxy
const renderComponent = shallowRef()

const detailComponent = ref()

watch(
  () => activeKey.value,
  () => {
    renderComponent.value = renderList.value
    if (activeKey.value == '2') {
      detailComponent.value = detailVue
    } else {
      detailComponent.value = detailTest
    }
  }
)

const renderList = ref()
onMounted(async () => {
  if (userInfo.value.realName === '招办教师') {
    renderList.value = listRecruitVue
  } else {
    renderList.value = listVue
  }
  renderComponent.value = renderList.value
  detailComponent.value = detailVue

  // 树组件选中
  mittBus.on('seeItem', () => {
    renderComponent.value = detailComponent.value
  })
  mittBus.on('back', () => {
    renderComponent.value = renderList.value
  })
})
</script>
<style lang="less" scoped>
.main-container {
  display: flex;
  flex-direction: row;
  height: @c_height;
  justify-content: space-between;

  .left {
    width: 30%;
    // height: 100%;
    background-color: #fff;
    margin-right: 16px;
  }

  .item-bg {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0px 0px 6px 1px rgba(128, 144, 219, 0.16);
    border-radius: 6px 6px 6px 6px;
    position: relative;

    .title {
      width: 100%;
      padding: 16px;
      font-weight: bold;
      color: #3f4355;
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      border-bottom: 2px solid #f0f1f8;
    }
  }

  .right {
    width: 70%;
    background-color: #fff;
  }
}

::v-deep(.ant-tabs) {
  background-color: #fff;
  height: 50px;
  padding-left: 30px;
  border-radius: 6px;
  font-weight: 400;
}

// ::v-deep(.ant-tabs-nav) {
//   background-color: #fff;
//   height: 40px;
//   padding-left: 15px;
//   border-radius: 6px;
// }
</style>
